<template>
	<view class="login">
		<view class="content">
			<!-- 顶部头像图片 -->
			<view class="header">
				<image src="../../../static/images/icons/leju-logo.png" mode="" @tap="uploadIcon"></image>
			</view>
			<!-- 中间两个输入框 -->
			<view class="main">
				<view class="user">
					<input type="text" value="" placeholder="手机号" v-model="phone"/> <!-- v-model="userName"也可以使用 -->
				</view>
				<view class="password">
					<input type="password" value="" placeholder="登录密码" v-model="password"/>
				</view>
				<view class="user">
					<input type="text" value="" placeholder="用户名" v-model="username"/> <!-- v-model="userName"也可以使用 -->
				</view>
				<view class="user">
					<input type="text" value="" placeholder="昵称" v-model="nickname"/> <!-- v-model="userName"也可以使用 -->
				</view>
				<view class="user">
					<input type="text" value="" placeholder="验证码"/> <!-- v-model="userName"也可以使用 -->
				</view>
			</view>
			<!-- 登录按钮 -->
			<button class="loginBtn" @click="doRegister">注 册</button>
			<!-- 底部footer -->
			<view class="footer">
				<navigator url="">同意</navigator>
				<view class="line"></view>
				<navigator url="">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { register } from "../../../api/my/register/register.js";
	import baseUrl from "../../../api/baseUrl.js";
	export default {
		data() {
			return {
				phone:'',
				password:'',
				username:'',
				nickname:'',
				icon:''
			};
		},
		methods:{
			// 上传头像
			uploadIcon(){
				uni.chooseImage({
					count:1,
					success:res=>{
						console.log(res);
						// this.icon = res.tempFilePaths[0];
						uni.uploadFile({
							url: baseUrl + '/lejuClient/login/uploadAvatar',
							filePath: res.tempFilePaths[0],
							name:'file',
							success:res=>{
								// console.log(res);
								// 获取头像信息,网络路径！！！！
								this.icon = JSON.parse(res.data).data.fileUrl;
								// console.log(this.icon);
							}
						})
						
					}
				})
			},
			// 登录
			doRegister(){
				register({
					phone: this.phone,
					password: this.password,
					username: this.username,
					nickname: this.nickname,
					icon: this.icon
				}).then(res=>{
					console.log(res);
					
					if(res.success==true){
						uni.showToast({
							title: '注册成功',
						})
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding-top: var(--status-bar-height);
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		 .header {
			 width: 160rpx;
			 height: 160rpx;
			 box-shadow: 0rpx 0rpx 60rpx 0px rgba(0,0,0,.1);
			 border-radius: 50%;
			 background-color: #000;
			 margin-top: 128rpx;
			 margin-bottom: 72rpx;
			 margin-left: auto;
			 margin-right: auto;
			  image {
				  width: 160rpx;
				  height: 160rpx;
				  border-radius: 50%;
			  }
		 }
		 // 中间两个输入框
		 .main {
			 display: flex;
			 flex-direction: column;
			 padding-left: 70rpx;
			 padding-right: 70rpx;
			 .user , .password {
				 height: 36rpx;
				 color: #333;
				 padding: 32rpx;
				 margin-top: 24rpx;
				 margin-bottom: 24rpx;
				 border: none;
				 border-radius: 70rpx;
				 box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1);
				  input {
					  text-align: left;
					  font-size: 28rpx;
					  padding-right: 10rpx;
					  margin-left: 20rpx;
				  }
		    }
		 }
		 // 登录按钮
		 .loginBtn {
			 width: 600rpx;
			 height: 100rpx;
			 background-color: rgb(53, 78, 68);
			 color: #FFFFFF;
			 font-size: 30rpx;
			 line-height: 100rpx;
			 border-radius: 100rpx;
			 margin-top: 100rpx;
		 }
		 // 底部footer
		 .footer {
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 font-size: 28rpx;
			 margin-top: 64rpx;
			 color: rgba(0,0,0,.7);
			 text-align: center;
			 height: 40rpx;
			 line-height: 40rpx;
			  .line {
				  font-size: 24rpx;
				  margin-left: 14rpx;
				  margin-right: 14rpx;
			  }
		 }
	}
</style>
